O padrão de layout a ser utilizado pelo site tem correspondência ao projeto de Interface elaborado anteriormente, conforme mostra a figura abaixo.
Figura - Estrutura padrão do site
O template criado está disponível no Figma, e é composto pelos seguintes layouts:
- Cabeçalho- Local onde são dispostos elementos fixos de identidade como o nome do site, navegação principal (menu da aplicação) e login;
- Conteúdo- Apresentará, para cada tela, seu conteúdo personalizado;
- Rodapé - Contém informações sobre direitos autorais, privacidade e social media.
Tela que contém todas as informações principais do site.
Figura 14 - Home page
Tela que contém os elementos necessários para que um usuário acesse sua conta.
Figura 15 - Login
Tela que permite que novos usuários criem uma conta no site.
Figura 16 - Cadastro
Tela com perguntas destinadas a identificar as necessidades individuais dos usuários em relação à sua pele.
Figura 17 - Questionário
Tela que contém a rotina de skincare gerada e que poderá ser visualizada novamente na área do usuário.
Figura 21 - Tela rotina skincare
Todas as telas que possuem contéudo informativo, apresentam a estrutura abaixo:
Figura 22 - Conteúdo informativo